<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>{{ cardData.groupName }}</span>
      <el-button
        style="float: right; margin: 3px 0px"
        type="success"
        size="small"
        >更改模型</el-button
      >
      <el-button
        style="float: right; margin: 3px 9px"
        type="primary"
        size="small"
        >添加节点</el-button
      >
    </div>
    <div class="text item">
      <el-table :data="cardData.nodeList" style="width: 100%">
        <el-table-column prop="nodeName" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="ip" label="IP" width="180"> </el-table-column>
        <el-table-column prop="port" label="端口"> </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="{ row }">
            <el-tag v-if="row.status === 'busy'" type="warning">在忙</el-tag>
            <el-tag v-if="row.status === 'offline'" type="info">离线</el-tag>
            <el-tag v-if="row.status === 'online'" type="success">在线</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="option" label="操作">
          <el-button type="text">查看详情</el-button>
          <el-button style="color: #f56c6c" type="text">移除节点</el-button>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div slot="footer">
      <el-button style="float: right; padding: 3px 9px" type="text"
        >添加节点</el-button
      >
    </div> -->
  </el-card>
</template>
<script>
export default {
  name: "TaskList",
  props: ["cardData"],
  data() {
    return {
      tmp: "hello ",
      tableData: [
        {
          name: "Pi1",
          ip: "10.11.223.232",
          port: "8777",
          status: "1",
        },
      ],
      tableData1: [
        {
          name: "Pi2",
          ip: "10.11.223.232",
          port: "8777",
          status: "1",
        },
      ],
    };
  },
};
</script>
<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
